<Ul class=top-nav menu>

Создаем меню с помощью Bootstrap

Сегодня мы продолжаем обзор возможностей Bootstrap 3 и рассмотрим компонент NavBar. Этот компонент позволит вам создать меню любой сложности, которое будет функционировать на любом устройстве, будь то стационарный компьютер или смартфон. Давайте для начала посмотрим, как этот элемент выглядит на разных устройствах.

Navbar на ПК

Вот так компонент Navbar выглядит на настольных компьютерах - все элементы видны (которые мы в него добавили).

Navbar на мобильных устройствах

А вот так Navbar выглядит на мобильных устройствах. Все элементы скрыты и появляются, когда мы нажимаем на кнопку "гамбургер" справа.

Navbar также легко прикрепить к экрану, чтобы при прокрутке меню всегда занимало позицию либо всегда вверху, либо всегда внизу.

С теорией вроде всё понятно, теперь мы можем посмотреть на пример кода. Navbar в Bootstrap реализован с использованием тега nav. Следующий кодя разделю на части, и я постараюсь объяснить каждую часть кода:

Пример меню

<nav role="navigation"> <div>  <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a href="#">Brand</a> </div>  <div> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li> <a href="#" data-toggle="dropdown">Dropdown <b></b></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li></li> <li><a href="#">Separated link</a></li> <li></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form role="search"> <div> <input type="text" placeholder="Search"> </div> <button type="submit">Submit</button> </form> <ul> <li><a href="#">Link</a></li> <li> <a href="#" data-toggle="dropdown">Dropdown <b></b></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div> </div></nav>

Если вы хотите, чтобы сделать меню "резиновым", вы можете просто изменить значение класса container на container-fluid:

<div>

Если вместо "container-fluid" оставить класс "container", то Navbar не будет растягиваться на всю ширину экрана и займет ширину контейнера по умолчанию. Максимальная ширина контейнера 1170px.

Следующая часть кода отвечает за название компании (brand) и кнопку, которая появляется на мобильных устройствах:

<div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a href="#">Brand</a></div>

Этот фрагмент кода содержит элементы навигации или, проще говоря, пункты меню. Как вы можете видеть, в меню можно добавлять не только выпадающие списки, но и целые формы.

<div> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li> <a href="#" data-toggle="dropdown">Dropdown <b></b></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li></li> <li><a href="#">Separated link</a></li> <li></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form role="search"> <div> <input type="text" placeholder="Search"> </div> <button type="submit">Submit</button> </form> <ul> <li><a href="#">Link</a></li> <li> <a href="#" data-toggle="dropdown">Dropdown <b></b></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul></div>

На мобильных устройствах все эти элементы мы можем увидеть, нажав на кнопку "гамбургер":

Чтобы элементы отображались правильно (onclick) (в мобильном варианте), важно, чтобы следующие идентификаторы совпадали:

В нашем примере, меню содержит различные элементы: простые элементы (например, ссылки) и сложные элементы (например, форма или раскрывающийся список). Чтобы создать меню мы используем HTML-тег UL:

<ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li> <a href="#" data-toggle="dropdown">Dropdown <b></b></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li></li> <li><a href="#">Separated link</a></li> <li></li> <li><a href="#">One more separated link</a></li> </ul> </li></ul>

Классы nav navbar-nav необходимы, чтобы расположить пункты списка горизонтально. Для создания простой ссылки в меню вы можете использовать следующий код:

<li><a href="#">Ссылка</a></li>

Чтобы подчеркнуть выбранный пункт меню вы можете использовать класс active. Для того, чтобы создать выпадающее меню, необходимо добавить класс dropdown к родительскому тегу LI и поместить каретку внутри элемента (<b></b>), кликнув по которой выпадающее меню раскроется. Во вложенный список UL нам нужно добавить класс dropdown-menu.

<li> <a href="#" data-toggle="dropdown">Dropdown <b></b></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li></li> <li><a href="#">Separated link</a></li> <li></li> <li><a href="#">One more separated link</a></li> </ul></li>

Фиксированное меню вверху страницы

Для того, чтобы зафиксировать меню вверху страницы вам нужно добавить класс navbar-fixed-top:

Фиксированное меню внизу страницы

Для того, чтобы зафиксировать меню вверху страницы вам нужно добавить класс navbar-fixed-bottom:

Инвертированный Navbar

Изменить внешний вид навигационной панели можно, добавив класс navbar-inverse

Если у вас есть вопросы по созданию меню с помощью Bootstrap, пишите в комментариях или на нашем форуме.

Видеокурс по Bootstrap

Перевод статьи с www.script-tutorials.com

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Комментарии:

Добавить комментарий

www.webmasters.by

Создание адаптивного меню с использованием CSS

В этом уроке мы расскажем о способе создания адаптивного меню. Это меню использует чистую разметку HTML5 и может быть выровнено по левой стороне, центру или правой стороне. Меню раскрывается, когда пользователь наводит указатель мыши, а также обладает индикатором, показывающим активный/текущий элемент меню. Это меню работает во всех браузерах на мобильных устройствах и настольных компьютерах, включая браузер Internet Explorer.

Демонстрация работы

Цель

Цель этого урока — показать вам, как превратить обычное меню в виде списка в выпадающее меню для маленьких экранов.

Этот способ наиболее полезен для меню с большим количеством ссылок, как на снимке экрана ниже. Вы можете собрать все кнопки в элегантный выпадающий список.

Разметка HTML

Вот разметка для этого меню. Тег <nav> нужен, чтобы создать выпадающий список со свойством CSS абсолютного расположения. Мы объясним это ниже. Класс .current показывает активную/текущую ссылку меню.

<nav> <ul> <li><a href="#">Portfolio</a></li> <li><a href="#">Illustration</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Print Media</a></li> <li><a href="#">Graphic Design</a></li> </ul> </nav>

CSS

CSS для версии меню для настольных компьютеров довольно понятен, так что мы не будем вдаваться в подробности. Заметьте, что мы задали свойство display:inline-block вместо float:left для элементов <li> меню. Это позволит выравнивать кнопки меню по левой стороне, центру или правой стороне, задавая значение свойства text-align элементу <ul>.

/* Меню */ .nav { position: relative; margin: 20px 0; } .nav ul { margin: 0; padding: 0; } .nav li { margin: 0 5px 10px 0; padding: 0; list-style: none; display: inline-block; } .nav a { padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; } .nav a:hover { color: #000; } .nav .current a { background: #999; color: #fff; border-radius: 5px; }

Выравнивание по центру и правой стороне

Как упомянуто выше, Вы можете изменить выравнивание кнопок, используя свойство text-align.

/* Меню справа */ .nav.right ul { text-align: right; } /* Меню в центре */ .nav.center ul { text-align: center; }

Поддержка браузера Internet Explorer

Тег HTML5 <nav> и media query не поддерживаются браузером Internet Explorer 8 и ниже. Включите в код css3-mediaqueries.js или respond.js и html5shim.js, чтобы обеспечить обратную совместимость. Если Вы не хотите включать html5shim.js, замените тег <nav> тегом <div>.

Адаптивность

Переходим к самой интересной части — сделать меню адаптивным с помощью media query. Если Вы не знакомы с адаптивным дизайном, Вы можете прочитать наши предыдущие статьи об адаптивном дизайне и media query.

В переходной точке 600px мы задали элементу меню относительное расположение, чтобы мы могли разместить список меню <ul> сверху с абсолютным расположением. Мы спрятали все элементы <li>, задав им свойство display:none, но оставили .current <li>, показывая его блоком. После этого мы снова задали всем элементам <li> свойство display:block, когда пользователь наводит указатель мыши на меню, что создаст выпадающий список. Мы добавили графическую «галочку» элементу .current, чтобы показать, что это активный элемент. Для центрального и правого выравнивания меню используйте свойства левого и правого отступов, чтобы расположить список <ul>. Посмотрите пример, чтобы увидеть окончательный результат.

@media screen and (max-width: 600px) { .nav { position: relative; min-height: 40px; } .nav ul { width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .nav li { display: none; /* hide all <li> items */ margin: 0; } .nav .current { display: block; /* show only current <li> item */ } .nav a { display: block; padding: 5px 5px 5px 32px; text-align: left; } .nav .current a { background: none; color: #666; } /* При наведении указателя мыши на меню*/ .nav ul:hover { background-image: none; } .nav ul:hover li { display: block; margin: 0 0 5px; } .nav ul:hover .current { background: url(images/icon-check.png) no-repeat 10px 7px; } /* Меню справа */ .nav.right ul { left: auto; right: 0; } /* Меню в центре */ .nav.center ul { left: 50%; margin-left: -90px; } }

Автор урока Nick La

Перевод — Дежурка

Смотрите также:

www.dejurka.ru

Bootstrap 3 - Навигационные меню (Navbar)

В этом уроке вы узнаете, как создать навигационное меню для вашего сайта с помощью Twitter Bootstrap.

Создание навигационного меню с помощью Twitter Bootstrap

Навигационные меню — это адаптивные компоненты, которые представляют собой панель с гиперссылками и другими элементами для осуществления организации переходов между страницами и выполнения других основных функций вашего веб-приложения или сайта. Навигационные меню Bootstrap на устройствах с небольшим размером экрана "сжимаются" и "расширяются" при увеличении ширины экрана устройства.

Для начала создадим навигационное меню с простыми пунктами, а затем добавим пункты с подпунктами и текстовым полем для поиска информации на сайте.

Выше приведенный пример будет выглядеть примерно так:

Формы в навигационном меню

Для отображения элементов формы в навигационном меню, их необходимо поместить внутри тега <form> с классом .navbar-form для правильного выравнивания их по вертикали и сжатия на небольших экранах.

Примечание: Некоторым элементам управления формы (<input>) в навигационном меню, требуется установка фиксированной ширины для правильного их отображения на устройствах с небольшим экраном.

При размещении кнопок вне формы, необходимо добавить к элементу <button> класс .navbar-btn, чтобы отцентрировать их по вертикали навигационном меню.

При размещении обычного текста (например, с помощью тега (<p>) добавляйте к соответствующему элементу класс .navbar-text для получения необходимой высоты строки и цвета.

При использовании гиперссылок без применения соответствующих компонентов Bootstrap, Вы должны использовать класс .navbar-link.

Для выравнивания компонентов (гиперссылки, формы, кнопки или текст) применяйте служебные классы .navbar-left или .navbar-right. Например, чтобы выравнять гиперссылки, поместите их в отдельный элемент <ul>, а затем примените соответствующий служебный класс.

Навигационное меню с выпадающим подменю и поисковой формой.

<nav role="navigation">  <div> <button type="button" data-target="#navbarCollapse" data-toggle="collapse" > <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a href="#">Бренд</a> </div>  <div> <ul> <li><a href="#">Главная</a></li> <li><a href="#">Статьи</a></li> <li> <a data-toggle="dropdown" href="#">Новости <b></b></a> <ul role="menu"> <li><a href="#">Windows</a></li> <li><a href="#">Mac OS</a></li> <li><a href="#">Linux</a></li> <li></li> <li><a href="#">Другие системы</a></li> </ul> </li> </ul> <form role="search"> <div> <input type="text" placeholder="Найти"> </div> </form> <ul> <li><a href="#">Войти</a></li> </ul> </div> </nav>

Выше приведенный пример будет выглядеть примерно так:

Фиксированные навигационные меню (Fixed Navbar)

Twitter Bootstrap также предоставляет механизм для создания фиксированных навигационных меню, которые строго прикреплены к верхней или нижней части страницы и перемещается вместе с содержимым страницы при ее прокручивании.

Навигационное меню, прикрепленное к верхней части страницы

Для создания навигационного меню, прикрепленного к верхней части страницы необходимо добавить дополнительный класс .navbar-fixed-top к основным классам навигационного меню .navbar и .navbar-default.

<nav role="navigation"> <div>  <div> <button type="button" data-target="#navbarCollapse" data-toggle="collapse"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a href="#">Бренд</a> </div>  <div> <ul> <li><a href="#">Главная</a></li> <li><a href="#">Статьи</a></li> <li><a href="#">Новости</a></li> </ul> <ul> <li><a href="#">Войти</a></li> </ul> </div> </div> </nav>

Выше приведенный пример будет выглядеть примерно так:

Примечание: Располагайте содержимое навигационного меню внутри контейнера (.container или .container-fluid) чтобы обеспечить соответствие отступов меню отступам основного содержания страницы.

Навигационное меню, прикрепленное к нижней части страницы

Аналогично, чтобы создать навигационное меню, прикрепленного к нижней части страницы необходимо добавить дополнительный класс .navbar-fixed-bottom.

<nav role="navigation"> <div>  <div> <button type="button" data-target="#navbarCollapse" data-toggle="collapse" > <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a href="#">Бренд</a> </div>  <div> <ul> <li><a href="#">Главная</a></li> <li><a href="#">Статьи</a></li> <li><a href="#">Новости</a></li> </ul> <ul> <li><a href="#">Войти</a></li> </ul> </div> </div> </nav>

Выше приведенный пример будет выглядеть примерно так:

Примечание: Фиксированное меню располагается поверх остального контента страницы. Если вы не добавите отступы для основного содержания страницы от ее верхней или нижней границы, то может случиться наложение. Так как фиксированная высота навигационного меню составляет 50px, то необходимо задать отступ более 50px (Например: body {padding-top: 70px;}), с помощью стиля CSS, файл которого необходимо подключить после основного CSS файла Bootstrap. В противном случае, значение заданного отступа работать не будет.

Создание статичного навигационного меню (Static Top Navbar) с помощью Twitter Bootstrap

В отличие от навигационных меню, прикрепленных строго к нижней или верхней части страницы, данное навигационное меню может быть расположено в любом месте страницы и имеет ширину элемента контейнера. Причем, для статичного навигационного меню, в отличие фиксированного, задавать дополнительные отступы не требуется. Чтобы создать статичное навигационное меню необходимо добавить дополнительный класс .navbar-static-top к основным классам навигационного меню .navbar и .navbar-default.

Выше приведенный пример будет выглядеть примерно так:

Инвертированное навигационное меню (Inverted Navbar) Twitter Bootstrap

Чтобы создать инвертированное навигационное меню Bootstrap, необходимо добавить дополнительный класс .navbar-inverse к классу .navbar.

Выше приведенный пример будет выглядеть примерно так:

ooomarat.com

Вертикальное выпадающее меню на CSS при наведении и многоуровневые меню

Привет всем. Сегодня продолжим нашу тему о выпадающих меню и поговорим о как сделать вертикальное выпадающее меню. Как обычно, к каждому примеру будет доступен режим демо просмотра, а также файлы для скачивания.

Если вы попали на этот сайт случайно или искали другое выпадающее меню, советую перейти по ссылке, там собранно множество разных меню для сайта.

Вертикальных менюшек для сайтов довольно много, в этом уроке я покажу вам только вертикальное выпадающее меню на CSS при наведении с выпадашкой вправо и влево, а также многоуровневые выпадающие меню. Другие варианты вертикальных меню для сайта будут описаны в следующих уроках. И так преступим.

Навигация по странице:

В качестве вступления, думаю стоит рассказать принцип работы выпадашек на CSS.

У всех браузеров, которые запущенные с ПК или ноутбука, в CSS доступно свойство :hover (тут я малость неправ, это псевдокласс 🙂 ) на базе которого можно построить практически любое вертикальное выпадающее меню.

А что же делать с мобильными браузерами? - или на планшетах спросите вы.

К счастью, разработчики мобильных браузеров предусмотрели (к сожалению не везде) возможность срабатывания псевдокласса :hover при первом нажатии на ссылку, если оно описано в CSS. Благодаря этим стараниям, большинство пользователей сможет увидеть ваше вертикальное выпадающее меню CSS.

Пара слов о преимуществе выпадающих меню:

можно вместить очень длинные меню в ограниченное пространство;
дизайн становится более изящным;
частично улучшаются поведенческие факторы.

Вертикальное выпадающее меню вправо

к менюПредставляю вашему вниманию первый пример: простое вертикальное выпадающее меню вправо при наведении.

Написание менюшки мы начнем с html кода и сделаем его универсальным на списках, вариант ответа идентичный тому, что возвращает wordpress.

Html для вертикального меню

Думаю в плане понимания html у вас не возникнет никаких сложностей, типичные списки с тегами ul и li. Смотрим код:

Меню для сайта на списках: у некоторых пунктов есть выпадающие блоки, у некоторых нет. Все предельно просто, думаю никаких пояснений не нужно.

Вертикальное выпадающее меню CSS

к менюСо стилями CSS вопрос немного по сложнее. Я вам покажу код только самого меню, а остальные стили вы сможете посмотреть когда скачаете пример.

#menuVertical{width:100%;height:auto;} #menuVertical ul{ display:block; width:100%; height:auto; margin:0px; padding:0px; list-style:none; position:relative; } #menuVertical ul li{display:block; width:100%; height:auto; position:relative;} #menuVertical ul li a{ position:relative; display:block; width:100%; height:auto; box-sizing:border-box; font-size:13px; text-transform:uppercase; font-weight:bold; color:#FBF7F7; line-height:1.2em; padding:10px 15px; background:#3A9CD3; border-top:1px solid #236A92; text-decoration:none; } #menuVertical ul li:first-child a{border:0px;} #menuVertical ul li a:hover, #menuVertical ul li:hover a{ background:#0A3CC1; } #menuVertical ul li ul{ position:absolute; top:0px; left:100%; display:none; width:auto; } /*******показываем выпадашку при наведении ********/ #menuVertical ul li:hover ul{display:block;} #menuVertical ul li ul li a{ white-space:nowrap; text-transform:none; padding:5px 20px; } #menuVertical ul li ul li a:hover{ background:#75C1D4; color:#0A3CC1; }

Вот эта строчка CSS

#menuVertical ul li:hover ul{display:block;}

отвечает за выпадашку. Она показывает выпадающий блок при наведении. Остальные стили нужны для стилизации самого меню, а также правильного размещения списков / пунктов меню.

Посмотреть что у нас получилось в этом примере можно на скине:

Как работает вертикальное выпадающее меню css вы можете увидеть в режиме демо ниже, или скачав пример:

Вот такой не сложный пример выпадающего меню у меня получился.

Это еще не конец, идем дальше.

Предположим, что вам нужно сделать выпадающее меню при наведении с выпадашкой влево. На основе примера выпадашки вправо мы сейчас ее и реализуем.

Вертикальное выпадающее меню влево на CSS

к менюХтмл код оставляем прежним, его нет смысла менять. Разве что в самом примере, мне придется поменять местами левый блок и правый, для наглядности примера. (увидите скачав пример в конце)

Стили CSS будут немножко отличаться, хотя не кардинально. В моем простом примере достаточно исправить одно значение. В комментариях, я помечу его.

Для более сложных меню, вам потребуется сделать немножко больше правок. Смотрим стили:

#menuVertical{width:100%;height:auto;} #menuVertical ul{ display:block; width:100%; height:auto; margin:0px; padding:0px; list-style:none; position:relative; } #menuVertical ul li{display:block; width:100%; height:auto; position:relative;} #menuVertical ul li a{ position:relative; display:block; width:100%; height:auto; box-sizing:border-box; font-size:13px; text-transform:uppercase; font-weight:bold; color:#FBF7F7; line-height:1.2em; padding:10px 15px; background:#3A9CD3; border-top:1px solid #236A92; text-decoration:none; } #menuVertical ul li:first-child a{border:0px;} #menuVertical ul li a:hover, #menuVertical ul li:hover a{ background:#0A3CC1; } #menuVertical ul li ul{ position:absolute; top:0px; right:100%;/*поменяли здесь*/ display:none; width:auto; } /*******показываем выпадашку при наведении ********/ #menuVertical ul li:hover ul{display:block;} #menuVertical ul li ul li a{ white-space:nowrap; text-transform:none; padding:5px 20px; } #menuVertical ul li ul li a:hover{ background:#75C1D4; color:#0A3CC1; }

Вот и все. У нас получилось вот такое меню. Слева кликабельный скин, справа демо и ссылка на скачивание примера:

Далее, я хочу показать вам пример, как создать вертикальное многоуровневое меню с выпадашками при наведении.

Вертикальное многоуровневое меню

к менюВ жизни, вертикальные многоуровневые меню выпадающие при наведении встречаются довольно редко. Хотел показать пару примеров из своего загашника, но увы не смог найти. Придется сделать 🙂 . Сложного в этих меню для сайта ничего нет, типичный CSS для выпадашки.

Начнем. Для начала хтмл код. У нас добавится несколько списков ul li для следующих уровней сайта. Мой пример будет на 3 выпадающих подменю, по этому html код будет такой:

<nav> <ul> <li><a href="#m1">Первая услуга</a></li> <li><a href="#m2">Вторая услуга</a> <ul> <li><a href="#m2_1">Выпадашка 1</a></li> <li><a href="#m2_2">Выпадашка 2</a></li> </ul> </li> <li><a href="#m3">Есть выпадашки далее</a> <ul> <li><a href="#m3_2">Выпадашка с третьей услуги 1</a></li> <li><a href="#m3_1">Есть выпадашки далее</a> <ul> <li><a href="#m3_1_1">Есть выпадашка далее</a> <ul> <li><a href="#m3_1_1_1">Пункт 1</a></li> <li><a href="#m3_1_1_2">Выпадашка конец</a></li> <li><a href="#m3_1_1_3">Выпадашка конец</a></li> </ul> </li> <li><a href="#m3_1_2">Нет выпадашки далее</a></li> </ul> </li> <li><a href="#m3_3">Краткая выпадашка</a></li> <li><a href="#m3_4">Краткая выпадашка</a></li> <li><a href="#m3_5">Краткая выпадашка</a></li> </ul> </li> <li><a href="#m4">4 услуга</a></li> <li><a href="#m5">5 услуга</a> <ul> <li><a href="#m5_1">111111</a></li> <li><a href="#m5_2">2222 2222</a></li> </ul> </li> <li><a href="#m6">6 услуга</a></li> </ul> </nav>

Будьте внимательны, только у третьего пункта меню есть многоуровневая выпадашка, у остальных я не делал, дабы не засорять хтмл и так его много.

Далее идут стили, они не сильно отличаются от предыдущих примеров, но все же:

#menuVertical{width:100%;height:auto;} #menuVertical ul{ display:block; width:100%; height:auto; margin:0px; padding:0px; list-style:none; position:relative; } #menuVertical ul li{display:block; width:100%; height:auto; position:relative;} #menuVertical ul li a{ position:relative; display:block; width:100%; height:auto; box-sizing:border-box; font-size:13px; text-transform:uppercase; font-weight:bold; color:#FBF7F7; line-height:1.2em; padding:10px 15px; background:#3A9CD3; border-top:1px solid #236A92; text-decoration:none; } #menuVertical ul > li:first-child > a{border:0px;} #menuVertical ul li a:hover, #menuVertical ul li:hover a{ background:#0A3CC1; } #menuVertical ul li ul{ position:absolute; top:0px; left:100%; display:none; width:150px; } /*******показываем выпадашку при наведении ********/ #menuVertical ul li:hover > ul{display:block;} #menuVertical ul li ul li a{ text-transform:none; padding:5px 20px; } #menuVertical ul li ul li a:hover, #menuVertical ul li ul li:hover > a{ background:#75C1D4; color:#0A3CC1; }

Это стили для создания вертикального многоуровневого выпадающего меню вправо при наведении. Вариант с выпадашкой влево будет чуть далее. Смотрим ниже что у нас получилось на рисунке (скин кликабельный):

В режиме демо просмотра наведите на третий пункт, потом на второй, потом на первый – если хотите увидеть работу многоуровневого меню полностью.

Как создать такое же меню с выпадашкой влево?

Сейчас я приведу стиль, который нужно поменять, для создания выпадашки вправо:

На рисунке я показал где он находится:

На втором рисунке можно посмотреть как работает вертикальное многоуровневое меню влево при наведении.

к менюРазумеется, примеры меню довольно простенькие и абстрактные. Обычно верстальщику приходится делать выпадашки со сложной версткой и кучей дров, но на мой взгляд, главное правильно задать выпадающею часть, а стили для красоты меню берутся исходя с дизайна.

На этом у меня все, до новых встреч.

Советую посетить родительскую страницу https://help-wp.ru/vypadayushhee-menu/ с разными вариантами меню, или же просмотреть запись горизонтальное выпадающее меню.

Поделитесь ссылкой со своими друзьями в социальных сетях:

Комментарии к записи «Вертикальное выпадающее меню на CSS при наведении и многоуровневые меню»:

help-wp.ru

javascript - Bootstrap 3 - Hover menu on desktop but open on click when minimized (mobile nav)

Using Bootstrap 3.

I'm trying to keep my site's navigation working using hover on the desktop but when using mobile navigation I want the navigation to open on click. I can't seem to get my options to work with what I've got. I don't have a great grasp on CSS so I may be screwing this up with something small... or large...

Right now the site works fine on the desktop version with the navigation open on click then hover opens the remaining sub links. The problem is when I reduce the page width to the mobile version the navigation does not work as I want. What I am getting is the navigation opening up on hover but I want each link to open on click only.

I've created a bootply as an example: http://www.bootply.com/tjL1FPgPT4

HTML:

<div role="navigation"> <div> <div> <button type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a>SiteName</a> </div> <div> <ul> <li> <a href="#" data-toggle="dropdown">LinkHere<b></b></a> <ul> <li>Names</li> <li> <a href="#" data-toggle="dropdown">Level1</a> <ul> <li> </li><li> <a href="#" data-toggle="dropdown">Level2.1</a> <ul> <li> <a href="#">Level3-Link1</a> <a href="#">Level3-Link2</a> </li> </ul> </li> <li> </li><li> <a href="#" data-toggle="dropdown">Level2.2</a> <ul> <li> <a href="#">Level3.1</a> <a href="#">Level3.2</a> </li> </ul> </li> </ul> </li><li> <a href="#" data-toggle="dropdown">OtherLink</a> <ul> <li> <a href="#">Link1</a> <a href="#">Link2</a> </li> </ul> </li> <li role="separator"></li> <li>Email</li> <li> <a href="#">Yahoo</a> </li> <li role="separator"></li> <li>Phone</li> <li> <a href="#">CallNow</a> </li> </ul> </li> </ul> <ul> <li> <a href="#" data-toggle="dropdown">Drop Down<b></b></a> <ul> <li> <a href="#" data-toggle="dropdown">Level 1</a> <ul> <li> <a href="#">Link 1</a> </li> <li> <a href="#" data-toggle="dropdown">Level 2</a> <ul> <li> <a href="#">Link 3</a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> <ul> <li> <a href="#" data-toggle="dropdown">Drop Down<b></b></a> <ul> <li> <a href="#" data-toggle="dropdown">Level 1</a> <ul> <li> <a href="#">Link 1</a> </li> <li> <a href="#" data-toggle="dropdown">Level 2</a> <ul> <li> <a href="#">Link 3</a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </div> </div>

and CSS:

/*custom for submenu here*/ .dropdown-submenu { position:relative; } .dropdown-submenu>.dropdown-menu { top:0; left:100%; margin-top:-6px; margin-left:-1px; -webkit-border-radius:0 6px 6px 6px; -moz-border-radius:0 6px 6px 6px; border-radius:0 6px 6px 6px; } .dropdown-submenu:hover>.dropdown-menu { display:block; } .dropdown-submenu>a:after { display:block; content:" "; float:right; width:0; height:0; border-color:transparent; border-style:solid; border-width:5px 0 5px 5px; border-left-color:#cccccc; margin-top:5px; margin-right:-10px; } .dropdown-submenu:hover>a:after { border-left-color:#ffffff; } .dropdown-submenu.pull-left { float:none; } .dropdown-submenu.pull-left>.dropdown-menu { left:-100%; margin-left:10px; -webkit-border-radius:6px 0 6px 6px; -moz-border-radius:6px 0 6px 6px; border-radius:6px 0 6px 6px; } @media only screen and (max-width:767px){ .dropdown-submenu{ display: block; position: static; background-color:transparent; border:0 none; box-shadow:none; margin-top:0; width:100%; } .navbar-nav .dropdown-menu > li > a, .navbar-nav .dropdown-menu .dropdown-header { padding:5px 15px 5px 25px; } .navbar-nav .dropdown-menu > li > a{ line-height:20px; } .navbar-default .navbar-nav .dropdown-menu > li > a{ color:#777; } .navbar-nav .dropdown-menu .dropdown-submenu > a{ display:block; margin-top: 0; } }

stackoverflow.com